<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>列表渲染</title>
</head>
<body>
    <div id="app">
        <ul id="example-1">
            <li v-for="(item,index) in items" :key="item.message" >
                {{item.message}}-{{index}}
            </li>

        </ul>
        <!-- v-for遍历对象 name是键名 -->
        <ul id="example-2">
            <li v-for="(valan,name,index) in objk" >
             {{index}}--{{name}}--{{valan}}
            </li>
        </ul>
        
        <!-- 显示过滤/排序后的结果 -->
        <ul>
            <li v-for="n in evenumbers">
                {{n}}
            </li>
        </ul>
        
        <!-- v-for使用值范围 -->
        <p v-for="m in 10">{{m}}</p>
 

    </div>
    


    <script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            items:[
                {message:'foo'},
                {message:'bar'}
            ],
            objk:{
                title:"abc",
                author:"cdf",
                pubili:"2016-01-10"
            },
            numbers:[1,2,3,4,5]
        },
        computed:{
            //计算属性来显示过滤后的结果
            evenumbers: function () {
               return this.numbers.filter(function (number) {
                  return number % 2 === 0
               })
            }
        }
    })


    </script>
</body>
</html>